@import '../../../../style/index.less';
.layoutMode{
    width: 110px;
    height: 112px;
    display: inline-block;
    border: 1px solid #f5f5f5;
    margin: 0 16px 16px 0;
    padding-top: 5px;
    background-color: #F5F5F5;
    text-align: center;
    border-radius:4px;
    cursor: pointer;
    & .box{
        width:110px;
        height:80px;
        padding: 8px;
        box-sizing: border-box;
        padding-top: 2px;
        position: relative;
        // background:rgba(46,116,255,1);
        // opacity:0.15;
        & img{
            width: ~"calc(100% - 16px)";
            position: absolute;           
            left: 8px;
            top: 50%;
            transform: translate(0,-50%);
        }
    }
}
.layoutMode.active{
    width:110px;
    height:112px;
    border:1px solid rgba(46,116,255,1);
    opacity:1;
    border-radius:4px;
    background-color: #fff;
}
:global{
    .zent-design-editor-item{
        width:615px
    }   
    .zent-design-component-image-ad-editor__add-entry-btn{
        width:489px;
        height:112px;
        background:rgba(255,255,255,1);
        border:1px solid rgba(217,217,217,1);
        opacity:1;
        border-radius:4px;
        margin-top: 16px;
    }
    .zent-design-component-image-ad-editor__entry-list{
        width: 488px;
    }
    .zent-design-component-image-ad-editor__entry:not(:last-child) {
        margin-bottom: 16px;
    }
    .zent-design-component-image-ad-editor__entry-prepend-btn{
        display: none;
    }
    .zent-design-component-image-ad-editor__entry-append-btn{
        display: none;
    }
    .zent-design-component-image-ad-editor__entry{
        &:hover{
            .zent-design-component-image-ad-editor__entry-prepend-btn{
                display: none;
            }
            .zent-design-component-image-ad-editor__entry-append-btn{
                display: none;
            }
        }
        .micropage_imagenav{
            .zent-design-component-image-ad-editor__image-entry-error {
                color: #f44;
                position: absolute;
                bottom: 8px;
                // left: 192px;
                left: 184px;
            }
        }
    }
    .small{
        height: 100%;
        & .swiper-preview-item-h{
            height: 100%;
            & img{
                width: 100%;
                height: 100%;
                vertical-align: top;
            }
        }
    }
    .swiper-preview-item-h{
        & img{
            width: 100%;
            vertical-align: top;
        }
    }
    .image-ad__image-nav{
        overflow-x: hidden;
        white-space: nowrap;
    }
   .image-wrapper{
        display: inline-block;
        vertical-align: middle;
       // padding-right: 1px;
        box-sizing: border-box;
        & .image-ad__image{
           /* padding-right: 1px;*/
            box-sizing: border-box;
            & img{
                width: 100%;
                // width: calc(100% - 1px);
                // height: 100%;
                vertical-align: top;
            }
        }
        & .image-ad__nav-title{
            padding-left: 5px;
            padding-right: 5px;
            padding-bottom: 9px;
            height: 33px;
            line-height: 24px;
            text-align: center;
            overflow: hidden;
            box-sizing: border-box;
        }
        & .image-ad__text-nav-title{
            position: relative;
            // height: 12px;
            // line-height: 12px;
            font-size: 12px;
            text-align: center;
            padding: 16px 5px;
            overflow: hidden;
            &::after{               
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                top: 50%;
                left: 0;
                width: 200%;
                height: 50%;               
                margin-top: -6px;                              
                transform: scale(.5);               
                transform-origin: 0 0;
                pointer-events: none;               
                box-sizing: border-box;
                border-right: 1px solid #eee;
            }
        }
   }


}
.display{
    :global{
        .zent-design-editor__control-group-label{
            display: none;
        }
    }
}
